<template>
	<view class="page">
		<u-navbar title="验证码核销">
		</u-navbar>
		<view v-if="isShow" class="result-box">
			<view v-if="resultCode===200" class="success">
				<image class="images" src="@/static/tduck/success.png"></image>
				<view class="text">核销成功</view>
				<view>核销时间：{{ dateFormat(date) }}</view>
			</view>
			<view v-if="resultCode!==200" class="success">
				<image class="images" src="@/static/tduck/fail.png"></image>
				<view class="text">核销失败</view>
				<view>核销时间：{{ dateFormat(date) }}</view>
			</view>
		</view>
		<view class="result-box">
			<u-button v-if="isShow" type="primary" @click="confirmationCode">继续核销</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			date: new Date(),
			isShow: false,
			resultCode: ''
		}
	},
	onLoad(options) {
		this.confirmationCode()
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	methods: {
		confirmationCode() {
			let that = this
			uni.scanCode({
				success: function (res) {
					const confirmationCode = {
						formKey: res.result.split(',')[0],
						code: res.result.split(',')[1]
					}
					that.$u.api.getConfirmationCodeRequest(confirmationCode).then(res => {
						that.isShow = true
						that.resultCode = 200
					}).catch(res => {
						that.isShow = true
						that.resultCode = res.code
					})
				}
			});
		},
		//时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
		dateFormat(time) {
			var date = new Date(time);
			var year = date.getFullYear();
			/* 在日期格式中，月份是从0开始的，因此要加0
			 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			 * */
			var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			// 拼接
			return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
		}
	},
}
</script>

<style scoped>
.page {
	background-color: #f3f4f6;
	height: 100vh;
}

.result-box {
	padding: 30rpx;
}

.success {
	background-color: #ffffff;
	padding: 60rpx;
	border-radius: 7rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.images {
	width: 80px;
	height: 80px;
}

.text {
	font-size: 40rpx;
	margin-top: 30rpx;
	margin-bottom: 20rpx;
}
</style>
